<script setup lang="ts">
	import { getApartmentInfo, getHomeBannerAPI, getHomeTwoaAPI } from '@/services/home'
	import type { BannerItem, CategoryItem, HotItem, HouseItem } from '/@/types/home'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import CustomNavbar from './components/CustomNavbar.vue'
	import CategoryPanel from './components/CategoryPanel.vue'
	import HotPanel from './components/HotPanel.vue'
	import { useApartmentList } from '@/composables'
	import { ApartmentInfo } from '/@/types/global'


	// 获取轮播图数据
	const bannerList = ref<BannerItem[]>([])
	const getHomeBannerData = async () => {
		const res = await getHomeBannerAPI()
		bannerList.value = res.data
	}

	// 获取首页两格推荐数据-特惠
	const indulgenceList = ref<HouseItem[]>([])
	const getHomeIndulgenceData = async () => {
		const res = await getHomeTwoaAPI('contract_money')
		indulgenceList.value = res.data.list
	}

	// 获取首页两格推荐数据-爆款
	const hotList = ref<HouseItem[]>([])
	const getHomeHotData = async () => {
		const res = await getHomeTwoaAPI('update_time')
		hotList.value = res.data.list
	}
	// 加载公寓信息
	const apartmentData = ref<ApartmentInfo>()
	const getApartmentData = async () => {
		const res = await getApartmentInfo(1)
		apartmentData.value = res.data
	}
	// 是否加载中标记
	const isLoading = ref(false)

	// 页面加载
	onLoad(async () => {
		isLoading.value = true
		await Promise.all([getHomeBannerData(), getHomeIndulgenceData(), getHomeHotData(), getApartmentData()])
		isLoading.value = false

	})

	// 猜你喜欢组合式函数调用
	const { apartmentRef, onScrolltolower } = useApartmentList()

	// 当前下拉刷新状态
	const isTriggered = ref(false)
	// 自定义下拉刷新被触发
	const onRefresherrefresh = async () => {
		console.log('xxx下拉')
		// 开始动画
		isTriggered.value = true
		// 加载数据
		await getHomeBannerData()
		await getHomeIndulgenceData()
		await getHomeHotData()
		// 重置猜你喜欢组件数据
		apartmentRef.value?.resetData()
		await Promise.all([
			getHomeBannerData(),
			getHomeIndulgenceData(),
			getHomeHotData(),
			apartmentRef.value?.getMore(),
		])
		// 关闭动画
		isTriggered.value = false
	}
</script>

<template>
	<view class="viewport">
		<!-- 自定义导航栏 -->
		<CustomNavbar />
		<!-- 滚动容器 -->
		<scroll-view enable-back-to-top refresher-enabled @refresherrefresh="onRefresherrefresh"
			:refresher-triggered="isTriggered" @scrolltolower="onScrolltolower" class="scroll-view" scroll-y>
			<template>
				<!-- 自定义轮播图 -->
				<XtxSwiper :list="bannerList" />
				<!-- 分类面板 -->
				<CategoryPanel />
				<!-- 自定义推荐 首页两格 -->
				<HotPanel :hotList="hotList" :indulgenceList="indulgenceList" />
				<view class="contact-group">
					<view class="contact-item">
						<text class="contact-text">公寓地址:</text>
						<text class="contact-value">{{ apartmentData.address}}</text>
					</view>
					<view class="contact-item">
						<text class="contact-text">客服热线:</text>
						<text class="contact-value">{{ apartmentData.phone }}</text>
					</view>
					<view class="contact-item">
						<text class="contact-text">营业时间:</text>
						<text class="contact-value">{{ apartmentData.businessHours }}</text>
					</view>
					<view class="contact-item">
						<text class="contact-text">邮箱:</text>
						<text class="contact-value">{{ apartmentData.phone }}</text>
					</view>
				</view>
				<!-- 推荐公寓 -->
				<XtxRecommendApartment ref="apartmentRef" />
			</template>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		height: 100%;
		overflow: hidden;
	}

	.viewport {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.scroll-view {
		flex: 1;
		overflow: hidden;
	}


	.contact-group {
		width: calc(100% - 20px);
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		border-radius: 5px;
		margin: 10px 10px;
		font-size: 14px;
		height: 120px;
	}

	.contact-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		  margin: 5px;
	}

	.contact-text {
		color: #262626;
		text-indent: 1em;	
	}
	.contact-value{
		color: #7f7f7f;
		margin-right: 14px;
	}
</style>
@/types/test @/utils/test